<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- <link rel="stylesheet" href="js/index.css"> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
    <!-- 官网提供的 axios 在线地址 -->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->

    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../static/index.css" />
<!-- 引入组件库 -->
    <!--<script src="js/jquery.min.js"></script>-->
    <script src="../static/vue.js"></script>
    <script src="../static/axios.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

     <!--<script src="../static/index.js"></script>-->

</head>
<body>
  <div id="app">
    <el-input  v-model="name" placeholder="姓名" style="width: 200px;"></el-input>
    <el-button type="primary" @click="findPage(1)">查询</el-button>
    <el-button type="primary" @click="toadd">添加</el-button>
    <el-button type="primary" @click="exportExcel">导出</el-button>
    <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
      <el-table-column type="index" align="center" label="序号"></el-table-column>
      <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="price" label="商品价格" align="center"></el-table-column>
      <el-table-column prop="num" label="商品库存" align="center"></el-table-column>
       <!--<el-table-column prop="sname" label="商品名称" align="center"></el-table-column>-->
      <!--<el-table-column prop="telephone" label="手机" align="center"></el-table-column>
      <el-table-column prop="email" label="邮箱" align="center"></el-table-column> -->
    
      <!-- <el-table-column  label="学生性别" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.studentSex=='1'">男</span>
            <span v-if="scope.row.studentSex=='2'">女</span>
        </template>
    </el-table-column> -->

    <!-- <el-table-column  label="爱好" align="center">
      <template slot-scope="scope">
          <span v-if="scope.row.hobby.includes ('1')">抽烟</span>
          <span v-if="scope.row.hobby.includes ('2')">喝酒</span>
          <span v-if="scope.row.hobby.includes ('3')">烫头</span>
      </template>
  </el-table-column> -->
    
    
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
      
  </div>
  
<script>
    new Vue({
        el:"#app",
        data:{
          action: '',
            counts: 0,
            page: 1,
            pageSize: 5,
          systemDto:{},
            name:"",
            dataList:[{}]
        },
        created(){
            this.findPage()
        },
        methods:{
            findPage(){
                axios.get(`http://localhost:8888/goods/page?page=${this.page}&pageSize=${this.pageSize}&name=${this.name}`).then(res=>{
                    this.dataList = res.data.data.records;
                    this.counts = res.data.data.total;
                })
            },
            toadd(){
              location.href="add.html"
            },
            handleDelete(id){
              axios.get(`http://localhost:8888/goods/delete?id=`+id).then(res=>{
                alert("删除成功")
                this.findPage()
              })
            },
            dateFormat(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if (data == undefined) {
                    return ''
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },
            handleUpdate(id){
              location.href="edit.html?id="+id
            },
            handleQuery() {
              this.page = 1;
              this.findPage();
            },
            handleSizeChange (val) {
            this.pageSize = val
            this.findPage()
           },
           handleCurrentChange (val) {
            this.page = val
            this.findPage()
          },
            exportExcel(){
            location.href="http://localhost:8888/goods/exportExcel";
          }
        }
    })
</script>
</body>
</html>